<template>
    <div style="display: inline-block">
        <el-dialog :visible.sync="dialog" :close-on-click-modal="false" title="修改密码" append-to-body width="500px" @close="cancel">
            <el-form ref="dataForm" :model="pwd" :rules="rules" size="small" label-width="88px">
                <el-form-item label="旧密码" prop="password">
                    <el-input v-model="pwd.password" type="password" auto-complete="on" style="width: 370px;" />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="pwd.newPassword" type="password" auto-complete="on" style="width: 370px;" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPass">
                    <el-input v-model="pwd.confirmPass" type="password" auto-complete="on" style="width: 370px;" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取消</el-button>
                <el-button :loading="loading" type="primary" @click="updateData">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { userPassword } from "@/api/system/user";
import waves from "@/directive/waves"; // Waves directive
import {} from "@/utils";

export default {
    name: "UpdatePass",
    directives: { waves },
    data() {
        const confirmPass = (rule, value, callback) => {
            if (value) {
                if (this.pwd.newPassword !== value) {
                    callback(new Error("两次输入的密码不一致"));
                } else {
                    callback();
                }
            } else {
                callback(new Error("请再次输入密码"));
            }
        };
        return {
            pwd: {},
            dialog: false,
            loading: false,
            rules: {
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                newPassword: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            var strlc = /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[^A-Za-z0-9]))(?=^[^\u4e00-\u9fa5]{0,}$).{8,20}$/;
                            if (value == null) {
                                callback(new Error("请输入新密码"));
                            } else if (value != null && value.length < 6) {
                                //(value != null && value.length < 6)
                                //(value.match(strlc) == null)
                                callback(
                                    new Error(
                                        //'密码过于简单有被盗风险，请保证密码大于8位，并且由大小写字母、数字，特殊符号组成'
                                        "密码不能小于6位数"
                                    )
                                );
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                confirmPass: [
                    { required: true, validator: confirmPass, trigger: "blur" }
                ]
            }
        };
    },

    methods: {
        open() {
            console.info("-----");
        },
        cancel() {
            this.resetTemp();
        },
        resetTemp() {
            this.$nextTick(() => {
                this.user = {
                    status: 1,
                    roleIdList: []
                };
                this.$refs["dataForm"].clearValidate();
            });
        },
        updateData() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    userPassword(this.pwd).then(() => {
                        this.pwd = {};
                        this.dialog = false;
                        this.$notify({
                            title: "成功",
                            message: "更新成功",
                            type: "success",
                            duration: 2000
                        });
                    });
                }
            });
        }
    }
};
</script>
